<!DOCTYPE html>
<html>
<head>
	<title></title>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="../js/jquery-v1.5.1.js"></script> 
    <script language="javascript" type="text/javascript" src="../js/jquery.flot.js"></script> 
	<script type="text/javascript" src="../js/openerror-v1.0.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	// GLOBALS / CONFIG DATA
	var oe;
	var map;
	var opts = {'scale_from':undefined};
	var origin = {"coordinates":[42.73342147048282, -84.55609416961669]};
	var origin_marker;
	var offset_marker;
	var histogram_object;
	var data;
	
	// Histogram object
	function Histogram()
	{
		this.distances = [];
		this.bucketSize = null;
		
	}
	Histogram.prototype.createHistogram = function()
	{
		if(this.bucketSize == null)
			return;
		
		var histogram = [[1,0],[2,0],[3,0],[4,0],[5,0]];
		for(var i=0;i<this.distances.length;i++)
		{
			var dist = this.distances[i];
			if(dist < this.bucketSize)
			{
				histogram[0][1]++;
			}
			else if(dist < (this.bucketSize * 2))
			{
				histogram[1][1]++;
			}
			else if(dist < (this.bucketSize * 3))
			{
				histogram[2][1]++;
			}
			else if(dist < (this.bucketSize * 4))
			{
				histogram[3][1]++;
			}
			else if(dist < (this.bucketSize * 5))
			{
				histogram[4][1]++;
			}
		}
		
		return histogram;
	}
	

	
	function init() {
		// create the google map
		var myOptions = {
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(origin.coordinates[0], origin.coordinates[1])
		}
		map = new google.maps.Map(document.getElementById("map"), myOptions);
		
		// create the marker
		origin_marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(origin.coordinates[0], origin.coordinates[1]),  
  			map: map
		});
		
		histogram_object = new Histogram();
		histogram_object.bucketSize = 1;

		// create and configure the openerror object
		oe = new OpenError();
		oe.setDebug(false);
		oe.setK(3);
		oe.setStandardDeviation(90);
	}
	
	// Create a new random point, adjust all visualizations
	function generateNewPoint(){
		// remove the old marker if it exists
		if(typeof offset_marker !== "undefined")
		{
			offset_marker.setMap(null);
		}
		
		
		var point = oe.Random.boxMuller();
		var distance = Math.sqrt( (point.coordinates[0]*point.coordinates[0]) + (point.coordinates[1]*point.coordinates[1]));
		point.scale(origin.coordinates[0], oe.getStandardDeviation(), oe.getUnits());
		var image = "../img/blue_marker.png";
		offset_marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(origin.coordinates[0]+point.coordinates[0], origin.coordinates[1]+point.coordinates[1]),  
  			map: map,
  			icon: image
		});
		
		document.getElementById("pointText").innerHTML = point.coordinates[0]+", "+point.coordinates[1];
		histogram_object.distances.push(distance);
		data = histogram_object.createHistogram();
		$.plot($("#chart"), [
        {
            data: data,
            bars: { show: true }
        }]);
	}
	</script>
</head>
<body onload="init()">
<h2>Generate Random Points and plot on Sparkline</h2>
<p>Generate a new point using the box muller function and add the x value to a list of data points. It then plots the sparkline.</p>

<div>
	<table>
	<tr>
		<td>
			<div id="map" style="width:500px;height: 400px;border: 1px solid black;float: left;">
		</td>
		<td>
		Random Point: <span id="pointText"></span><input type="button" value="Add New Point" onclick="generateNewPoint()" /><br/>
		<div id="chart" style="width: 300px; height: 150px;"></div>
		</td>
	</tr>
	</table>

</div>

</body>
</html>